<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-main>
        <h3 style="text-align: center">会员列表</h3>

        <el-form
          :inline="true"
          :model="search"
          class="demo-form-inline"
          style="width: 99%; margin: 0 auto; text-align: center"
        >
          <el-form-item label="ID">
            <el-input v-model="search.userid"></el-input>
          </el-form-item>

          <el-form-item label="账号">
            <el-input v-model="search.username"></el-input>
          </el-form-item>

          <el-form-item label="所属组">
            <el-select v-model="search.groupid">
              <el-option label="请选择" value="0"></el-option>
              <el-option
                v-for="item in $core_enums('member_group')"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="真实姓名">
            <el-input v-model="search.truename"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="to_search">查询</el-button>
            <el-button type="warning" @click="to_reset">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="rows"
          style="width: 99%; margin: 0 auto"
          border
        >
          <el-table-column
            prop="userid"
            label="ID"
            width="180"
          ></el-table-column>

          <el-table-column prop="username" label="账号" width="180">
            <template slot-scope="scope">
              <a
                href="javascript:void(0);"
                @click="handlePreview(scope.$index, scope.row)"
                >{{ scope.row.username }}</a
              >
            </template>
          </el-table-column>

          <el-table-column prop="groupid" label="所属组"></el-table-column>

          <el-table-column prop="truename" label="真实姓名"></el-table-column>

          <el-table-column align="right">
            <template slot="header" slot-scope="scope">操作</template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <br />
        <el-pagination
          background
          :total="total"
          :page-size="20"
          :current-page.sync="search.page"
          @current-change="handleCurrentChange"
          style="text-align: center"
        ></el-pagination>
        <br />
        <br />
      </el-main>
    </el-container>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      search: {
        page: 1,
        userid: "",
        username: "",
        groupid: "0",
        truename: "",
      },
      loading: false,
      rows: [],
      total: 0,
    };
  },
  async mounted() {
    this.load_data();
  },
  methods: {
    //加载数据
    load_data(cb) {
      this.loading = true;
      this.$axios
        .post("/api/member/lst", {
          page: this.search.page,
          userid: this.search.userid,
          username: this.search.username,
          groupid: this.search.groupid,
          truename: this.search.truename,
        })
        .then((data) => {
          this.loading = false;
          this.rows = data.data.rows;
          this.total = data.data.total;
          if (cb) {
            cb();
          }
          this.$forceUpdate();
        })
        .catch((error) => {
          this.loading = false;
          this.$message.error(error.toString());
        });
    },
    //分页点击
    handleCurrentChange(page) {
      this.search.page = page;
      this.load_data();
    },
    //搜索
    to_search() {
      var c = 0;
      if (parseInt(this.search.userid) > 0) {
        c++;
      }
      if (this.search.username.length > 0) {
        c++;
      }
      if (parseInt(this.search.groupid) > 0) {
        c++;
      }
      if (this.search.truename.length > 0) {
        c++;
      }
      if (!c) {
        this.$message.error("请输入搜索条件！");
        return;
      }
      this.search.page = 1;
      this.load_data();
    },
    //重置
    to_reset() {
      this.search = {
        page: 1,
        userid: "",
        username: "",
        groupid: "0",
        truename: "",
      };
      this.load_data();
    },
    //预览
    handlePreview(index, row) {
      this.$router.push({
        path: "/member/preview",
        query: { userid: row.userid },
      });
    },
    //编辑
    handleEdit(index, row) {
      this.$router.push({
        path: "/member/mod",
        query: { userid: row.userid },
      });
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
}
</style>
